<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<link rel="stylesheet" href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />
		<link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script src="../../../js/vue/vue.js"></script>
		<style>
			.container {
				padding-top: 10px;
				margin-left: 10px;
			}

			#zth-top-icon {
				font-size: 25px;
				width: 50px;
				cursor: pointer;
			}
			.zth-top-text{
				border-bottom: 2px #009E94 solid;
				line-height: 30px;
				padding-left: 20px;
				font-size: 18px;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="zth-top-text">博客管理</div>
			<div class="container">
				<div class="demoTable">
					<div class="zth-zth-icons">
					<script type="text/html" id="toolbarDemo">
						
							<i class="plus icon add" id="zth-top-icon"></i>
							<i class="edit icon" lay-event="edit" id="zth-top-icon"></i>
							<i class="eraser icon" lay-event="delBatch" id="zth-top-icon"></i>
					</script>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input class="layui-input" placeholder="输入博客类型关键字"  name="blog_category_name" id="blog_category_name" autocomplete="off">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<button class="layui-btn" data-type="reload">搜索</button>
							</div>
						</div>
					</div>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
		<script src="../../../js/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		
		</script>
		<script>
			layui.use(['table', "layer", "jquery"], function() {
				var table = layui.table;

				var $ = layui.jquery;
				var layer = layui.layer;

				//方法级渲染
				table.render({
					elem: '#test',
					url: '/ssb/blog/blogAll',
					toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
					id : 'testReload',
					cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						
					cols: [
						[{
								type: 'checkbox'
							}, {
								field: 'blog_title',
								title: '标题',
								width: 200
							}, {
								field: 'blog_cover_image',
								title: '预览图',
								templet:function(d){
									return '<img src="'+d.blog_cover_image+'">' 
								}
							} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
							, {
								field: 'blog_views',
								title: '浏览量',
								sort: true
							}, {
								field: 'blog_status',
								title: '状态',
								templet:function(d){
									if(d.blog_status==1){
										return '<a href="">发布</a>'
									}
										return '<a href="">草稿</a>'
									
								}
							}, {
								field: 'blog_category_name',
								title: '博客分类',
								 templet:function(d){
									var ures=$.ajax({
										url:"/ssb/category/findById",
										type:"get",
										data:{
											category_id:d.blog_category_id	
										},
										dataType:"JSON",
										cache : false,
										async : false,
										success:function(res){
											return res;
										}
									});
									 var urls=ures.responseJSON.category_name;
									return urls; 
								} 
							}, {
								field: 'create_time',
								title: '添加时间',
								align: 'center' //单元格内容水平居中
							}
				
				
						]
					],
					page: true,//開啟分頁
					
					parseData: function(res) { 
						//将原始数据解析成 table 组件所规定的数据
						console.log(res);
						return {
							"code": res.code, //解析接口状态
							"msg": res.msg, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.data //解析数据列表
						};
					}
				});
				
				//头工具栏事件
							table.on('toolbar(test)', function(obj) {
								var checkStatus = table.checkStatus(obj.config.id);
								var data = checkStatus.data;
								switch (obj.event) {
								case 'edit':
								
								if(data.length==1){
									location.href="../tb_blog1/tb_blog1.html?code$=2&blog_id="+data[0].blog_id;
									}else{
										if(data.length>1){
											layer.msg("不能同时进行多个编辑，谢谢理解");
										}else{
											layer.msg("请勾选在进行编辑");
										}
										
									}
									break;
								case 'delBatch':
									
									if (data.length == 0) {
										layer.msg('请选择要删除的数据');
									} else {
										layer.confirm('真的删除行么', function(index) {
											layer.close(index);
											//删除数据逻辑
											//获取要删除数据的id
											var ids = [];
											for (var i = 0; i < data.length; i++) {
												ids.push(data[i].blog_id);
											}
				
											$.ajax({
												url : "/ssb/blog/deleteBatch",
												data : {
													"ids" : ids
												},
												success : function(req) {
													if (req > 0) {
														layer.alert("删除成功！");
														//执行重载
														table.reload('testReload');
													} else {
														layer.alert("删除失败！");
													}
												}
											}); 
										});
									}
				
									break;
								};
							}); 
				

				$(".add").click(function() {
					location.href = "../tb_blog1/tb_blog1.html?code$=1";
				});


				var active = {
					reload: function() {
						//执行重载
						table.reload('testReload', {
							page: {
								curr: 1
								//重新从第 1 页开始
							},
							where: {
								blog_category_name: $("#blog_category_name").val()
							}
						}, 'data');
					}
				};
				
				//搜索按钮的点击事件
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});


			});
		</script>

	</body>
</html>
